<template>
	<view class="page" v-show="pageShow">
		<view class="head" :style="{ 'background-image': 'url(' + bannerImgUrl + ')' }">
			<view>
				<picker @change="cityChange" :range="cityTextList" :value="cintyIndex" mode="selector">
					<view class="city">{{ citySelected }}</view>
				</picker>
				<view class="search">
					<input class="search-in" name="search" type="text" id="textfield" placeholder="找工作、找房子、找点事" @click="openSearchResult()"/>
					<button class="su-input">搜索</button>
				</view>
			</view>
			<view class="numberView">
				<text>本站浏览:{{ viewVolume }}</text>
				<text style="margin-left:50rpx;">发布总量:{{ releaseVolume }}</text>
			</view>
		</view>
		<view class="body">
			<view class="column">
				<swiper :indicator-dots="true" :interval="3000" :duration="1000" class="column-swiper">
					<swiper-item v-for="(columnList, columnIndex) in columnSwiper" :key="columnIndex">
						<view class="column-list">
							<view class="column-item" v-for="columnItem in columnList" :key="columnItem.ID" @click="gotoColumnPage(columnItem)">
								<image :src="$getImgUrl(columnItem.Column1)" mode="aspectFit" class="column-item-img"></image>
								<text class="column-item-text">{{ columnItem.ClassName }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="vipad" @click="openJob()"><image :src="vpiImageUrl" mode="" class="vipad-img"></image></view>
			<view class="swiperad" v-show="isShowAds">
				<swiper :indicator-dots="true" :autoplay="true" :interval="6000" :duration="500" circular="true">
					<swiper-item v-for="ad in adsImg" :key="ad.ID" :id="ad.id">
						<view class="swiperad-item"><image :src="$getImgUrl(ad.imgpath)" mode="" class="swiperad-item-img"></image></view>
					</swiper-item>
				</swiper>
			</view>
			<view class="information">
				<view style="height: 100rpx;">
					<view class="information-class" @click="screenMenuIsFixed" :class="screenIsFixed"><Screen :screenList="screenList" @change="screenSelectItem"></Screen></view>
				</view>
				<view class="infomation-list"><InformationItem :infoList="infoList" :isMyPage="false" :isDel="false" :isMenu="true"></InformationItem></view>
				
			</view>
		</view>
		<view class="bottem">
			<BackTop v-if="backTopValue"></BackTop>
			<!-- #ifdef MP-WEIXIN -->
			<view class="piaofukefu"><button class="piaofukefubutton" open-type="contact">在线客服</button></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import InformationItem from '@/components/InformationItem/InformationItem.vue';
import Screen from '@/components/Screen/Screen.vue';
import BackTop from '@/components/FloatButton/BackTop.vue';
// import api from "@/restful/api.js"
export default {
	data() {
		return {
			pageShow:0,
			cintyIndex: 0,
			citySelected: '', //当前选择的城市名称
			cityTextList: [], //城市列表
			cityIdList: [], //城市ID列表
			cityId: 0, //城市id
			viewVolume: 0, //浏览量
			releaseVolume: 0, //发布量
			bannerImgUrl: '', // banner 图
			columnSwiper: [], // 栏目数组
			vpiImageUrl: '', // vip图片
			adsImg: [], // 广告图片
			screenList: [], //下拉菜单对象
			screenIsFixed: '', //下拉是否固定
			indexScreenXlList1: [],
			indexScreenXlList2: [{ ID: 1, ClassName: '热门', status: false }, { ID: 2, ClassName: '最新', status: false }, { ID: 3, ClassName: '有图', status: false }],
			indexScreenXlName1: '所有分类',
			indexScreenXlName2: '默认排序',
			indexScreenType: 2,
			infoList: [], // 信息列表
			infoClassId: -1, // 栏目ID默认值
			infoSortOrder: 0, // 栏目排序方式
			hasMore: true,
			currentPage: 2, // 默认加载第二页
			allPage: 1, // 所有页面
			backTopValue: false // 判断是否显示悬浮返顶按钮
		};
	},

	async onLoad(option) {
		uni.hideTabBar(
			{
				success: function(){
					console.log('菜单隐藏')
				},
			}
		)
		//option为object类型，会序列化上个页面传递的参数
		await this.$onLaunched;
		// this.getCityAry()
		this.pageShow = 1
		await this.readOnLoad();
		
		
	},
	onShow() {
		console.log(uni.getStorageSync('globaUserInfo'))
		console.log(uni.getStorageSync('globalUserInfoState'))
		if (uni.getStorageSync('globalUserInfoState') == '') {
			this.$Firstauthorization();
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 720) {
			this.screenIsFixed = 'is-fixed';
			this.backTopValue = true;
		} else {
			this.screenIsFixed = '';
			this.backTopValue = false;
		}
	},
	onReachBottom() {
		this.getIndexInfoMore();
	},
	onPullDownRefresh() {
		this.screenList = []; //让子组件重新加载数据
		this.infoList = []; //让子组件重新加载数据
		(this.infoClassId = -1), // 栏目ID默认值
			(this.infoSortOrder = 0), // 栏目排序方式
			this.$forceUpdate();
		this.onLoading(1200);
		this.getIndex(); // 调用首页信息
		this.getIndexInfo(); // 调用首页信息列表
		this.$forceUpdate();
	},
	// onTabItemTap:function(e){
	// 	// console.log(e)
	// 	this.$getUserInfo()
	// },
	// #ifdef MP
	onShareAppMessage(res) {
	    // if (res.from === 'button') {// 来自页面内分享按钮
	    //   console.log(res.target)
	    // }
	    return {
	      title: '百业信息报',
	      path: '/pages/index/index',
	    }
	},
	// #endif
	methods: {
		readOnLoad() {
			if(getApp().globalData.cityName == '通化') {
				uni.setTabBarItem({
				  index: 1,
				  text: '招聘',
				  iconPath: '/static/job/tabbar02.png',
				  selectedIconPath: '/static/job/tabbar02_active.png',
				  pagePath: '/pages/indexJump/indexjump',
				  success:function(){
				  	uni.showTabBar({
				  		success: function(){
				  			console.log('菜单显示')
				  		},
				  	})
				  }
				})
			}
			
			this.cityId = getApp().globalData.cityId;
			this.citySelected = getApp().globalData.cityName;
			this.cintyIndex = getApp().globalData.cityIndex;
			this.cityTextList = getApp().globalData.cityTextList; //城市名称列表
			this.cityIdList = getApp().globalData.cityIdList; //城市id列表

			this.screenList = []; //让子组件重新加载数据
			this.infoList = []; //让子组件重新加载数据
			(this.infoClassId = -1), // 栏目ID默认值
				(this.infoSortOrder = 0), // 栏目排序方式
				this.$forceUpdate();
			this.onLoading(1200);
			this.getIndex(); // 调用首页信息
			this.getIndexInfo(); // 调用首页信息列表
			this.$forceUpdate();
		},
		screenSelectItem(e) {
			console.log(e);
			e.forEach(el => {
				console.log(el);
				if (el.classId == 'XLID1') {
					this.infoClassId = el.ID;
				}
				if (el.classId == 'XLID2') {
					this.infoSortOrder = el.ID;
				}
			});
			this.getIndexInfo(); // 调用首页信息列表
			this.screenMenuIsFixed();
		},
		screenMenuIsFixed() {
			uni.pageScrollTo({
				duration: 0,
				scrollTop: 720
			});
		},
		gotoColumnPage(columnItem) {
			let { Column1, ...columnItems } = columnItem;
			console.log(columnItems);
			console.log(columnItems.Type);
			uni.navigateTo({
				url: '../infoList/infoList?parameter=' + encodeURIComponent(JSON.stringify(columnItem))
			});
		},
		async cityChange(e) {
			// console.log(e)
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.citySelected = this.cityTextList[e.target.value];
			this.cintyIndex = e.target.value;
			await this.$changeCity(this.cityIdList[e.target.value]);
			this.readOnLoad();
		},
		getCityAry() {
			// this.$api.getCityList()
			// .then(res =>{
			// 	// console.log(res.data)
			// 	let cityTextArray = []
			// 	let cityIdArray = []
			// 	// for (let i = 0; i < res.data.CityList.length; i++) {
			// 	//   let item = res.data.CityList[i];
			// 	//   cityTextArray.push(item.City)
			// 	//   cityIdArray.push(item.ID);
			// 	//  //  if (i == 0) {
			// 	// 	// getApp().globalData.cityId = item.ID;
			// 	// 	// this.cityId =  item.ID
			// 	// 	// this.citySelected = item.City
			// 	// 	// uni.setNavigationBarTitle({
			// 	// 	//   title: "百业信息报|" + item.City+'网'
			// 	// 	// })
			// 	//  //  }
			// 	// }
			// })
			// .catch(err=>{
			// 	console.log(err)
			// })
		},
		getIndex() {
			this.$api.getIndex({ cid: this.cityId }).then(res => {
				// console.log(res.data)
				this.viewVolume = res.data.Hits; // 浏览量
				this.releaseVolume = res.data.FBCount; // 发布量
				// this.bannerImgUrl = this.$imgUrl + res.data.KBPic // banner图
				this.bannerImgUrl = this.$getImgUrl(res.data.KBPic);
				this.columnSwiper = res.data.LanMu; // 栏目列表
				this.vpiImageUrl = this.$imgUrl + res.data.VIPPic; // vip图片
				this.adsImg = res.data.AdsImg; // 广告图片
				// console.log(this.adsImg.length)
				// 组合下拉菜单数据对象 开始
				this.indexScreenXlList1 = res.data.XLList;
				this.indexScreenXlList1.forEach(el => {
					el = Object.assign(el, { status: false });
				});
				this.screenList = [
					{ classId: 'XLID1', className: this.indexScreenXlName1, data: this.indexScreenXlList1 },
					{ classId: 'XLID2', className: this.indexScreenXlName2, data: this.indexScreenXlList2 }
				];
				// 组合下拉菜单数据对象 结束
			});
		},
		getIndexInfo() {
			this.onLoading(2500);
			this.$api.getIndexInfoList({ cid: this.cityId, lmid: this.infoClassId, sid: this.infoSortOrder, openid: getApp().globalData.openid }).then(res => {
				// console.log(res.data)
				this.infoList = res.data;
				this.$forceUpdate();
				uni.stopPullDownRefresh();
			});
		},
		getIndexInfoMore() {
			// this.onLoading(2500)
			this.$api
				.getIndexInfoListMore({ cid: this.cityId, lmid: this.infoClassId, sid: this.infoSortOrder, openid: getApp().globalData.openid, page: this.currentPage })
				.then(res => {
					this.currentPage = res.CurrentPage;
					this.allPage = res.Allpage;
					// this.infoList.concat(res.data)
					this.infoList = [...this.infoList, ...res.data];
					this.$forceUpdate();
				});
		},
		onLoading(time) {
			uni.showToast({
				title: '加载中...',
				icon: 'loading',
				duration: time
			});
		},
		openSearchResult(){
			uni.navigateTo({
				url: '../searchResult/searchResult'
			})
		},
		openJob(){
			uni.navigateTo({
				url:'../job/job'
			})
		},
	},
	components: {
		InformationItem,
		Screen,
		BackTop
	},
	computed: {
		isShowAds:function(){
			return this.adsImg.length
		}
	}
};
</script>

<style scoped>
@import url('index.css');
</style>
